D3 single axis jitterplot pan and zoom

D3 v4 single axis jitterplot pan and zoomを改造したもの

d3.extent()をMath.min()とMath.max()で置き換えた

transitionを消した

preactで書き換えた

ZoomTransform.rescaleX()およびZoomTransform.rescaleY()で、zoomしたい軸のscaleのみzoomすればいいようだ

ZoomTransform.toString()は使わない

これの縦軸をd3.scaleTime()に、横軸をd3.scaleBand()に差し替えれば、Google CalendarっぽいUIが作れそう

D3 single axis jitterplot pan and zoomをscaleTimeに置き換えてみる-@2023-04-08D30

こんなことやっている暇あるのか……？takker.icon

少なくとも、takker99/scrapbox-incremental-fulltext-searchなんかに時間を使うよりはずっとまし

d3-scale-chromatic

d3-random

ZoomTransform.rescaleX()

https://takker99.github.io/rund3?js=https://scrapbox.io/api/code/takker/D3_single_axis_jitterplot_pan_and_zoom/app.js

code:app.js

const { randomNormal, randomUniform, scaleLinear, select, zoom, interpolateInferno, axisLeft } = d3;

// data

// y成分は正規分布、x成分は一様分布で作る

const y = randomNormal(400, 100);

const x_jitter = randomUniform(-100, 100);

const points = ...Array(750)

.map(() => x_jitter(), y());

const ys = points.map((y) => y);

const extent = [

Math.min(...ys),

Math.max(...ys),

];

// fill

/** y値を0, 1に写像する

* 0, 1に変換した値を、色を決定する関数に渡して色を得る

const colorScale = scaleLinear()

.domain(extent)

.range(0, 1);

// dimensions

const margin = { top: 20, right: 20, bottom: 30, left: 40 },

svg_dx = 330,

svg_dy = 500;

const chart_dx = svg_dx - margin.right - margin.left;

const chart_dy = svg_dy - margin.top - margin.bottom;

/** y成分をグラフ上の座標に変換する */

const yScale = scaleLinear()

.domain(extent)

.range(chart_dy, margin.top);

// y-axis

const yAxis = axisLeft(yScale);

const { html, render, useState, useCallback, useEffect } = htmPreact;

const App = () => {

const new_yScale, setYScale = useState(() => yScale);

code:app.js

const handleMount = useCallback((svg) => {

if (!svg) return;

select(svg).call(

zoom().on("zoom", (e) => {

setYScale(() => e.transform.rescaleY(yScale));

}),

);// ref 1

}, []);

SVG Geometric Zooming · GitHub

code:app.js

const g, setG = useState(null);

useEffect(() => {

// re-scale y axis during zoom; ref 2

select(g).call(yAxis.scale(new_yScale));

}, g, new_yScale);

Pan & Zoom Axes · GitHub

code:app.js

return html`

${points.map((x, y) => html`

re-draw circles using new y-axis scale

d3.js - D3 prevent distortion when zooming - Stack Overflow

code:app.js

`)}

</g>

</svg>

}

render(html<${App} />, document.body);

#2023-04-08 18:57:03

#2023-04-07 22:03:18

#2023-04-05 02:07:00